<template>
	<view class="item" v-for="item in arr" :key="item.id">
		<view class="userTime">
			<view class="user">
				<image :src="item.ifAnonymous?item.userAvatar:url+'icon-15.png'" mode=""></image>
				<view>
					<text class="name xjs-line-one">{{ item.nickName }}</text>
					<view>
						<image v-for="items in item.comprehensiveEvaluation" :src="url+'icon-89.png'" mode=""></image>
					</view>
				</view>
			</view>
			<text>{{item.createTime.split(' ')[0]}}</text>
		</view>
		<view class="play">
			项目：{{item.goodsName}} <text>|</text>  服务：{{item.petsitterNickName}}
		</view>
		<view class="content">{{ item.content }}</view>
	</view>
</template>

<script lang="ts" setup>
import { watch } from 'vue';
import {ref} from 'vue'
const url = ref('https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/')
const props:any = defineProps(['list'])
const arr = ref([])
watch(()=>props.list,(newval)=>{
	arr.value = newval.map(item=>{
		item.nickName = item.ifAnonymous?item.nickName:item.nickName.slice(0, 1) + '**'
		return item
	})
},{deep:true,immediate:true})
</script>

<style lang="scss" scoped>
.item{
	width: 100%;
	padding: 40rpx 32rpx;
	margin-bottom: 24rpx;
	background: #FFFFFF;
	border-radius: 24rpx;
	box-sizing: border-box;
	
	.userTime{
		color: #7C807F;
		font-size: 26rpx;
		margin-bottom: 40rpx;
		@include flex(flex-start,space-between);
		.user{
			width: calc(100% - 184rpx);
			@include flex(center);
			image{
				width: 96rpx;
				height: 96rpx;
				margin-right: 16rpx;
				border-radius: 50%;
			}
			
			view{
				width: calc(100% - 96rpx - 16rpx);
				text{
					width: 100%;
					color: #1B2120;
					display: block;
					font-size: 36rpx;
					font-weight: bold;
					margin-bottom: 16rpx;
				}
				image{
					width: 24rpx;
					height: 24rpx;
					border-radius: inherit;
				}
			}
		}
	}
	.play{
		color: #7C807F;
		font-size: 24rpx;
		text{
			margin:0 24rpx;
		}
	}
	.content{
		color: #1B2120;
		font-size: 28rpx;
		margin-top: 24rpx;
		line-height: 38rpx;
	}
}
</style>